<template>
	<view class="content">
		<image class="logo" src="/static/logo.png"></image>
		<view class="text-area">
			<text class="title">{{ title }}</text>
		</view>
		<view class="block">时间:{{ date }}</view>
		<view class="block">
			时间戳:		{{ timestamp }}
			<text>以毫秒计算</text>
		</view>
		<view class="block">
			计算后:		
			<uni-date class="inline" :timestr="date"></uni-date>
			<text>动态传值</text>
		</view>
		<view class="block">
			计算后:		
			<uni-date class="inline" :timestr="'2019-10-01'"></uni-date>
			<text>不传小时从8点计算</text>
		</view>
		<view class="block">
			直接使用:		{{ utils.friendlyDate(timestamp) }}
			<text>直接使用仅支持时间戳</text>
		</view>
		<view class="block">
			时间戳转时间:		{{ utils.timeTodate('Y-m-d H:i:s index', timestamp) }}
			<text>Y-m-d H:i:s index</text>
		</view>
		<view class="block">
			动态使用:		
			<uni-format class="inline" format="Y-m-d H:i:s index" :timestr="date"></uni-format>
		</view>
	</view>
</template>

<script>
// 组件引用办法
import uniDate from '@/components/shoyu-date/shoyu-date';
import uniFormat from '@/components/shoyu-date/shoyu-date.vue';
// 组件引用办法 End

// 直接使用办法
import utils from '@/components/uni-date/utils.filter.js';
// 直接使用办法 End
export default {
	components: { uniDate, uniFormat },
	data() {
		return {
			title: 'Uni-date',

			// 如果不传小时的话，计算以每天8点开始计算
			date: '2019-10-01 08:00:00',

			// 直接使用需要进行声明
			utils: utils
			// 直接使用需要进行声明 End
		};
	},
	onLoad() {
		let that = this;

		// 时间转换为时间戳 如果

		that.timestamp = new Date(this.date).getTime();
		console.log(that.timestamp);
	},
	methods: {}
};
</script>

<style lang="scss">
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.logo {
	height: 200rpx;
	width: 200rpx;
	margin-top: 200rpx;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 50rpx;
}

.text-area {
	display: flex;
	justify-content: center;
}

.title {
	font-size: 36rpx;
	color: #8f8f94;
}
.block {
	display: block;
	font-size: 28rpx;
	width: calc(100% - 60rpx);
	padding: 0 30rpx;
	line-height: 50rpx;

	text {
		margin-left: 20rpx;
		color: #f00;
		font-weight: bold;
	}
}
.inline {
	display: inline-block;
}
</style>
